<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>报表-运营报表-运营报表-线路路况监控</title>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=7d24e3c0b1de00fcfc07dcb16ac3a087"></script>
<script>
	var requireExtraPaths = {
		extrance : '../../../service_js/report/reportLineTrafficMonitor'
	};
</script>
<jsp:include flush="true" page="../../base/base.jsp"></jsp:include>
  <style>
        .traffic_tag {
            position: fixed;
            z-index: 15;
            right: 30px;
            background-color: #fff;
            width: 200px;
            line-height: 30px;
            border: 1px solid #d6d7d9;
            margin-top: 5px;
            padding-bottom: 5px;
        }

        .traffic_level {
            float: left;
            margin: 11px 6px 0;
        }

        .traffic_level li {
            float: left;
            width: 25px;
            margin: 0 1px;
            height: 6px;
        }

        .level_1 {
            background: #34b000;
        }

        .level_2 {
            background: #fecb00;
        }

        .level_3 {
            background: #df0100;
        }

        .level_4 {
            background: #8e0e0b;
        }

        .panel_tab {
            float: left;
            height: 21px;
            line-height: 21px;
            border: 1px solid #0f89f5;
            border-radius: 2px;
            margin-left: 7px;
        }

        .panel_tab .active{
            background: #0f89f5;
            color: #FFF;
        }

        .traffic_item{
            float: left;
            padding: 0 13px;
            color: #0f89f5;
            font-size: 13px;
            cursor: pointer;
        }
    </style>
</head>
<body>
	<div class="traffic_tag">
    <div>
        <span style="float: left;margin-left: 15px;">畅通</span>
        <ul class="traffic_level">
            <li class="level_1"></li>
            <li class="level_2"></li>
            <li class="level_3"></li>
            <li class="level_4"></li>
        </ul>
        <span>拥堵</span>
    </div>
    <div>
        <div style="float: left;margin-left: 15px;line-height: 23px;">
            线路
        </div>
        <ul class="panel_tab" id="line-toggle">
            <li class="traffic_item active">显示</li>
            <li class="traffic_item">隐藏</li>
        </ul>
    </div>
</div>

<div id="iCenter" class="map-box"
     style="width: 100%;height: 100%;padding: 0;">
</div>
</body>
</html>